<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒙家辉</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="6">
                        <h2>{{sitename}}</h2>
                    </el-col>
                    <el-col :span="2" :offset="6">
                        &nbsp;
                        <span>{{totalPrice|formatPrice}}</span>
                    </el-col>
                    <el-col :span="6" :offset="4">
                        <el-button @click="toPage">{{shopcar|formCheckOut}}</el-button>
                    </el-col>
                </el-row>
                <el-row v-for="(product,i) in products">
                    <el-col :span="6">
                        <el-image style="width:300px; height: 500px;" :src="product.image"></el-image>
                    </el-col>
                    <el-col :span="6" :offset="6">
                        <h1>{{product.title}}</h1>
                        <p v-html='product.description'></p>
                        <p>{{product.price|formatPrice}}</p>
                        <el-button type="primary" @click="addToCar(product)" :disabled="product.avaailableInventory==0">{{buttonText}}</el-button>
                        <span v-if="product.avaailableInventory==0">All Out!</span>
                        <span v-else-if="product.avaailableInventory<5">Only {{product.avaailableInventory}} left!</span>
                        <span v-else>Buy Now!</span>
                        <el-rate v-model="product.rating"></el-rate>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>Main</el-main>
        </el-container>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    /**
     * @Author MengJiahui
     * @Date 5-12 
     */
    const app = new Vue({
        el: '#app',
        data: {
            shopcar: 0,
            sitename: "shopping mall",
            showProduct: true,
            buttonText: "Add to cat",
            products:[],
            value: 5,
            iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
            cart:[]
        },
        created() {
            axios.get('./json/products.json').then(({data})=>{
                this.products=data.products
            })
        },
        methods: {
            addToCar(product){
                this.shopcar++
                product.avaailableInventory--
                this.cart.push(product.id)
            },
            toPage(){
                window.location.href="./login.html"
            }
        },
        filters: {
            formatPrice(price) {
                return price==0?"":"￥"+price.toFixed(2)
            },
            formCheckOut(cartLength){
                return cartLength+"CheckedOut"
            }
        },
        computed: {
            totalPrice(){
                let currentPrice=0
                for(let i=0;i<this.cart.length;i++){
                    currentPrice+=this.products[this.cart[i]-1001].price
                }
                return currentPrice
            }
        },
    })
</script>

</html>